<template>
    <div class="_lgtext" @click="emit('clickEvent')">
        <slot></slot>
    </div>
</template>

<script setup> 
import { onMounted } from "vue";
const props = defineProps({
    textcolor: {
        type: [String],
        default: ''
    },

})
let _textcolor = computed({
    get: () => {
        return props.textcolor
    },
})
const emit = defineEmits(['clickEvent']);


</script>

<style lang="scss" scoped>
$_sdwidth: 20px;
._lgtext {
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-size: var(--smallfontsize);
    overflow: hidden;
    &::after {
        position: absolute;
        content: "";
        right: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        //transform: rotate(45deg);
        background: linear-gradient(
            to right,
            transparent,
            v-bind(_textcolor),
            transparent
        );
        background-size: 200% 100%;
        animation: 0.6s _sd ease-in-out infinite;
    }

    @keyframes _sd {
        0% {
            background-position: 200%;
            //transform: rotate(45deg) translateX(calc($_sdwidth * -1));
        }
        100% {
            background-position: 0%;
            // transform: rotate(45deg) translateX(calc(100% + $_sdwidth));
        }
    }
}
</style> 